import { Meta } from "@storybook/addon-docs";

<Meta title="Foundation/Typography"  />

# Typography

Typography is an important part of the design process. It plays a vital role in the process of communicating with the user.

<br/><br/>

### Typeface
Use [Lato](https://fonts.google.com/specimen/Lato) as the standard typeface, [Poppins](https://fonts.google.com/specimen/Poppins) for headlines and subheadline, and [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) for code snippets.

<br/><br/>

### Type scale


| HTML tag                  | Size px     | Font weight         | Text example             |
| -----------               | ----------- | -----------         | ------------------------ |
| <pre>&lt;h1&gt;</pre>     | 24px        | Poppins Normal 400  | <h1>H1 headline</h1>     |
| <pre>&lt;h2&gt;</pre>     | 21px        | Poppins Normal 400  | <h2>H1 headline</h2>     |
| <pre>&lt;h3&gt;</pre>     | 18px        | Poppins Normal 400  | <h3>H1 headline</h3>     |
| <pre>&lt;h4&gt;</pre>     | 16px        | Poppins Normal 400  | <h4>H1 headline</h4>     |
| <pre>&lt;h5&gt;</pre>     | 14px        | Poppins Normal 400  | <h5>H1 headline</h5>     |
| <pre>&lt;h6&gt;</pre>     | 12px        | Poppins Normal 400  | <h6>H1 headline</h6>     |
| <pre>&lt;body&gt;</pre>   | 14px        | Lato Normal 400     | This is default body text   |
| <pre>&lt;code&gt;</pre>   | 14px        | Roboto Mono Normal 400     | <code>code</code>     |
